<script setup>
import { ref, reactive, onMounted } from 'vue'
import { createRequestAPI, myRedTypeAPI } from '@/api/common'
import { useMemberStore } from '@/stores'
const memberStore = useMemberStore()

const constObj = {
  合作联系: '1',
  广告位申请: '2',
  场地申请: '3',
  '节日live show': '4',
}

const form = reactive({
  reqType: '',
  category: '',
  reqUserName: '',
  reqUserPhone: '',
  reqContent: '', //合作内容
  files: '', //合作图片
})

// 类目相关
const category = ref('')
const categoryList = ref([])

// 获取类目
const getCategory = async () => {
  const res = await myRedTypeAPI()
  categoryList.value = res.data
}

// 类目选择
const bindPickerChange = (e, data) => {
  const {
    target: { value },
  } = e
  console.log(value, data, data[value], '46===')
  category.value = data[value]
  form.category = data[value]
  form.reqType = constObj[data[value]]
}

// 文本框
const inputChange = (event) => {
  console.log(event.detail)
}

// 获取图片
const getImage = (data) => {
  const { imageList } = data
  form.files = imageList
}

// 提交
const submit = async () => {
  if (!form.category)
    return uni.showToast({ title: '请选择类目', icon: 'none' })
  try {
    await createRequestAPI(form)
    uni.showToast({ title: '报名成功', icon: 'none' })
    setTimeout(() => {
      uni.navigateBack()
    }, 500)
  } catch (error) {
    uni.showToast({ title: error.msg, icon: 'none' })
  }
}

onMounted(() => {
  form.reqUserName = memberStore.profile?.nickName
  form.reqUserPhone = memberStore.profile?.phonenumber
  getCategory()
})
</script>

<template>
  <view class="contact">
    <view class="form">
      <view class="form-item">
        <view class="label">合作类目</view>
        <view class="value">
          <picker
            @change="(e) => bindPickerChange(e, categoryList)"
            :range="categoryList"
          >
            <view v-if="!category">请选择类目</view>
            <view class="black" v-else>{{ category }}</view>
          </picker>
        </view>
      </view>
      <view class="form-item">
        <view class="label">姓名</view>
        <input
          disabled
          v-model="form.reqUserName"
          class="uni-input"
          placeholder="请输入姓名"
        />
      </view>
      <view class="form-item">
        <view class="label">联系方式</view>
        <input
          disabled
          v-model="form.reqUserPhone"
          class="uni-input"
          placeholder="请输入联系方式"
        />
      </view>
    </view>
    <view class="textarea-view">
      <textarea
        class="textarea"
        v-model="form.reqContent"
        @input="inputChange"
        maxlength="200"
        placeholder-style="color:#999999"
        placeholder="请输入您的合作要求，最多支持200字"
      />
      <view class="count">({{ form.reqContent.length }}/200)</view>
      <easy-upload @change="getImage" />
    </view>
    <view @click="submit" class="submit">提交</view>
  </view>
</template>

<style lang="scss" scoped>
.contact {
  padding: 24rpx 48rpx;
  .form {
    .form-item {
      margin-bottom: 32rpx;
      display: flex;
      align-items: center;
      .label {
        width: 120rpx;
        font-size: 28rpx;
        color: rgba(51, 51, 51, 1);
        margin-right: 16rpx;
      }
      .uni-input,
      .value {
        padding: 0 34rpx;
        flex: 1;
        height: 90rpx;
        border-radius: 12rpx;
        background: rgba(245, 245, 245, 0.6);
        backdrop-filter: blur(4px);
      }
      .value {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 28rpx;
        color: #999999;
        .right-icon {
          image {
            width: 16rpx;
            height: 24rpx;
          }
        }
      }
      .black {
        font-size: 16px;
        color: #000000;
      }
    }
  }

  .textarea-view {
    border-radius: 16rpx;

    padding: 36rpx 28rpx;
    width: 100%;
    // height: 690rpx;
    background: #f5f5f5;
  }
  .textarea {
    width: 100%;
    height: 410rpx;
  }

  .count {
    font-size: 28rpx;
    color: #999999;
    margin-bottom: 32rpx;
  }

  .select-file {
    image {
      width: 36rpx;
      height: 34rpx;
    }
  }

  .submit {
    margin-top: 94rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90rpx;
    border-radius: 10rpx;
    background: #ea5506;
    font-size: 32rpx;
    font-weight: 700;
    color: rgba(255, 255, 255, 1);
  }

  ::v-deep {
    .file-picker__box-content {
      background: #ffffff;
    }
  }
}

.limit2 {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: nowrap;
}
.limit3 {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  white-space: nowrap;
}
</style>
